/**
 * 插件形式封装全局指令
 */
import { useIntersectionObserver } from '@vueuse/core'
// 导入加载失败显示的默认图片
import defImg from '@/assets/images/200.png'
// 图片加载动画
import loadImg from '@/assets/images/load.gif'
export default {
  install (app) {
    // console.log('实例对象：', app)
    // vue3 挂载全局属性（所有组件都可以获取load）| vue2 => Vue.prototype.name = 'axios'
    app.config.globalProperties.load = loadImg
    // 注册全局指令
    // 指令作用：操作DOM
    app.directive('ilazy', {
      // 绑定元素的父组件被挂载时调用
      /**
       *
       * @param {*} el 使用ilazy指令的元素
       * @param {*} binding 获取指令上绑定的值
       */
      mounted (el, binding) {
        // console.log('元素挂载了：', el, binding)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 1. 图片进入可视区=》给图片赋值（src）=>下载图片并渲染显示=》关闭监控
              setTimeout(() => {
                el.src = binding.value
              }, 200)
              // 2. 图片加载失败处理=>显示一个默认图片
              el.onerror = () => {
                el.src = defImg
              }
              stop()
            }
          }
        )
      }
    })
  }
}
